//
//  PopularView.swift
//  Chatup
//
//  Created by iron man on 2024/1/13.
//

import SwiftUI

struct PopularView: View {
    var tap:((MsgItem,Int) -> Void)?
    @StateObject var viewModel = PopularViewModel()
    var body: some View {
        GeometryReader { proxy in
            VStack(alignment: .leading){
                Text(String.i18nText("most_popular"))
                    .font(.system(size: 16,weight: .semibold))
                    .foregroundColor(.white)
                Spacer()
                    .frame(height: 14)
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack {
                        ForEach(viewModel.items.indices, id: \.self) { index in
                            PressableEffectButton(action: {
                                tap?(.init(text: viewModel.items[index].title), index)
                            }, label: {
                                HStack {
                                    Text(viewModel.items[index].title)
                                        .font(.system(size: 16,weight: .bold))
                                    .foregroundColor(.white)
                                    Spacer()
                                    Text(viewModel.items[index].iconName)
                                        .font(.system(size: 36))
                                        .foregroundColor(.white)
          
                                }
                                .padding()
                                .frame(width: (proxy.size.width - 10)/2, height: 72)
                                .background(.white.opacity(0.1))
                                .cornerRadius(12)
                                .overlay(
                                  RoundedRectangle(cornerRadius: 12)
                                    .inset(by: 0.5)
                                    .stroke(.white.opacity(0.1), lineWidth: 1)
                                )
                              
                            
                            })
                        }
                    }
                }
                .frame(width: proxy.size.width)
            }
        }
    }
}

#Preview {
    PopularView()
}
